import React from 'react';

import { MdState } from '../model/BizState';


import * as echarts from 'echarts/core';
import {
    BarChart,
    LineChart
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    // 数据集组件
    DatasetComponent,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
    LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';


// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LegendComponent
]);

class EchartForm extends React.Component<any, MdState> {

    constructor(props: any) {
        super(props)
        this.state = {
            content: ''
        }
    }

    componentDidMount() {
        this.initChartData()
    }

    initChartData = () => {
        var list = [{ "name": "2024-07-19", "createValue": 4, "reviewedValue": 36, "waitReviewValue": 0, "planReviewValue": 36 }, { "name": "2024-07-20", "createValue": 3, "reviewedValue": 37, "waitReviewValue": 0, "planReviewValue": 37 }, { "name": "2024-07-21", "createValue": 3, "reviewedValue": 40, "waitReviewValue": 0, "planReviewValue": 40 }, { "name": "2024-07-22", "createValue": 3, "reviewedValue": 26, "waitReviewValue": 0, "planReviewValue": 26 }, { "name": "2024-07-23", "createValue": 3, "reviewedValue": 0, "waitReviewValue": 0, "planReviewValue": 38 }, { "name": "2024-07-24", "createValue": 3, "reviewedValue": 74, "waitReviewValue": 0, "planReviewValue": 36 }, { "name": "2024-07-25", "createValue": 3, "reviewedValue": 57, "waitReviewValue": 0, "planReviewValue": 57 }, { "name": "2024-07-26", "createValue": 3, "reviewedValue": 32, "waitReviewValue": 0, "planReviewValue": 32 }, { "name": "2024-07-27", "createValue": 3, "reviewedValue": 34, "waitReviewValue": 0, "planReviewValue": 34 }, { "name": "2024-07-28", "createValue": 2, "reviewedValue": 34, "waitReviewValue": 0, "planReviewValue": 34 }, { "name": "2024-07-29", "createValue": 0, "reviewedValue": 42, "waitReviewValue": 0, "planReviewValue": 42 }, { "name": "2024-07-30", "createValue": 2, "reviewedValue": 39, "waitReviewValue": 0, "planReviewValue": 39 }, { "name": "2024-07-31", "createValue": 3, "reviewedValue": 25, "waitReviewValue": 0, "planReviewValue": 25 }, { "name": "2024-08-01", "createValue": 2, "reviewedValue": 42, "waitReviewValue": 0, "planReviewValue": 42 }, { "name": "2024-08-02", "createValue": 3, "reviewedValue": 30, "waitReviewValue": 0, "planReviewValue": 30 }, { "name": "2024-08-03", "createValue": 3, "reviewedValue": 39, "waitReviewValue": 0, "planReviewValue": 39 }, { "name": "2024-08-04", "createValue": 0, "reviewedValue": 39, "waitReviewValue": 0, "planReviewValue": 39 }, { "name": "2024-08-05", "createValue": 0, "reviewedValue": 42, "waitReviewValue": 0, "planReviewValue": 42 }, { "name": "2024-08-06", "createValue": 2, "reviewedValue": 27, "waitReviewValue": 0, "planReviewValue": 27 }, { "name": "2024-08-07", "createValue": 2, "reviewedValue": 27, "waitReviewValue": 0, "planReviewValue": 27 }, { "name": "2024-08-08", "createValue": 3, "reviewedValue": 36, "waitReviewValue": 0, "planReviewValue": 36 }, { "name": "2024-08-09", "createValue": 4, "reviewedValue": 42, "waitReviewValue": 0, "planReviewValue": 42 }, { "name": "2024-08-10", "createValue": 4, "reviewedValue": 35, "waitReviewValue": 0, "planReviewValue": 35 }, { "name": "2024-08-11", "createValue": 5, "reviewedValue": 35, "waitReviewValue": 0, "planReviewValue": 35 }, { "name": "2024-08-12", "createValue": 0, "reviewedValue": 37, "waitReviewValue": 0, "planReviewValue": 37 }, { "name": "2024-08-13", "createValue": 0, "reviewedValue": 52, "waitReviewValue": 0, "planReviewValue": 52 }, { "name": "2024-08-14", "createValue": 5, "reviewedValue": 31, "waitReviewValue": 0, "planReviewValue": 31 }, { "name": "2024-08-15", "createValue": 3, "reviewedValue": 41, "waitReviewValue": 0, "planReviewValue": 41 }, { "name": "2024-08-16", "createValue": 3, "reviewedValue": 43, "waitReviewValue": 0, "planReviewValue": 43 }, { "name": "2024-08-17", "createValue": 0, "reviewedValue": 37, "waitReviewValue": 0, "planReviewValue": 37 }, { "name": "2024-08-18", "createValue": 2, "reviewedValue": 28, "waitReviewValue": 0, "planReviewValue": 28 }, { "name": "2024-08-19", "createValue": 0, "reviewedValue": 24, "waitReviewValue": 7, "planReviewValue": 31 }, { "name": "2024-08-20", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 33, "planReviewValue": 33 }, { "name": "2024-08-21", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 32, "planReviewValue": 32 }, { "name": "2024-08-22", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 35, "planReviewValue": 35 }, { "name": "2024-08-23", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 20, "planReviewValue": 20 }, { "name": "2024-08-24", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 30, "planReviewValue": 30 }, { "name": "2024-08-25", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 16, "planReviewValue": 16 }, { "name": "2024-08-26", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 28, "planReviewValue": 28 }, { "name": "2024-08-27", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 35, "planReviewValue": 35 }, { "name": "2024-08-28", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 23, "planReviewValue": 23 }, { "name": "2024-08-29", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 33, "planReviewValue": 33 }, { "name": "2024-08-30", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 29, "planReviewValue": 29 }, { "name": "2024-08-31", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 16, "planReviewValue": 16 }, { "name": "2024-09-01", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 21, "planReviewValue": 21 }, { "name": "2024-09-02", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 18, "planReviewValue": 18 }, { "name": "2024-09-03", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 16, "planReviewValue": 16 }, { "name": "2024-09-04", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 21, "planReviewValue": 21 }, { "name": "2024-09-05", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 15, "planReviewValue": 15 }, { "name": "2024-09-06", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 13, "planReviewValue": 13 }, { "name": "2024-09-07", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 10, "planReviewValue": 10 }, { "name": "2024-09-08", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 19, "planReviewValue": 19 }, { "name": "2024-09-09", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 21, "planReviewValue": 21 }, { "name": "2024-09-10", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 16, "planReviewValue": 16 }, { "name": "2024-09-11", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 10, "planReviewValue": 10 }, { "name": "2024-09-12", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 20, "planReviewValue": 20 }, { "name": "2024-09-13", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 30, "planReviewValue": 30 }, { "name": "2024-09-14", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 20, "planReviewValue": 20 }, { "name": "2024-09-15", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 20, "planReviewValue": 20 }, { "name": "2024-09-16", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 14, "planReviewValue": 14 }, { "name": "2024-09-17", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 19, "planReviewValue": 19 }, { "name": "2024-09-18", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 13, "planReviewValue": 13 }, { "name": "2024-09-19", "createValue": 0, "reviewedValue": 0, "waitReviewValue": 13, "planReviewValue": 13 }]
        var nameArr: string[] = [], createArr: number[] = [], reviewedArr: number[] = [], planReviewArr: number[] = [], waitReviewArr: number[] = []
        list.forEach(so => {
            nameArr[nameArr.length] = so.name
            createArr[createArr.length] = so.createValue
            reviewedArr[reviewedArr.length] = so.reviewedValue
            planReviewArr[planReviewArr.length] = so.planReviewValue
            waitReviewArr[waitReviewArr.length] = so.waitReviewValue
        })
        var myChart = echarts.init(document.getElementById("everyDay"))

        var legend = { data: ['创建数', '实际复习数', '原计划复习数', '待复习数'] }
        var mySeries = [
            { name: "创建数", data: createArr, type: 'line', color: ["#90EC7D"] },
            { name: "实际复习数", data: reviewedArr, type: 'line', color: ["#66AEDE"] },
            { name: "原计划复习数", data: planReviewArr, type: 'line', color: ["#FAD860"] },
            { name: "待复习数", data: waitReviewArr, type: 'line', color: ["#FF0011"] },
        ]
        var option = {
            title: { text: "每日统计" },
            legend: legend,
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: nameArr, axisLabel: { rotate: 30 } },
            yAxis: { type: 'value' },
            series: mySeries
        }
        myChart.setOption(option)
    }


    render() {
        const divStyly = { width: 800, height: 400, margin: "0 auto" }
        return (
            <div>
                <h3>Echart 测试</h3>
                <div id="everyDay" style={divStyly} > dtest </div>
            </div>
        )
    }
}

export default EchartForm   // 直接这样 export 获取不到路由参数